<template>
  <div>
    <el-form ref="form" :model="q" label-width="110px" :inline="true" @submit.native.prevent>
      <el-card>
        <el-form-item label="登录账号">
          <el-input size="small" v-model="q.queryUsername" clearable @change="queryData()" placeholder="-请输入登录账号-"/>
        </el-form-item>
        <el-form-item label="">
          <el-button size="small" icon="el-icon-search" @click="queryData()">查询</el-button>
        </el-form-item>
      </el-card>
    </el-form>

    <el-table :data="dataList" ref="dataTable" border v-loading="dataLoading" style="width: 100%;"
              @sort-change="(val) => orderSort(val)" @selection-change="(val) => selectionChange(val)">
      <el-table-column type="selection" width="40"/>
      <el-table-column label="序号" width="50" header-align="center" align="center">
        <template slot-scope="scope">{{(q.page - 1) * q.limit + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column align="center" prop="username" label="登录账号" width="120" />
      <el-table-column align="center" prop="operation" label="用户操作" width="200" />
      <el-table-column align="center" prop="method" label="请求方法" show-overflow-tooltip />
      <el-table-column align="center" prop="params" label="请求参数" show-overflow-tooltip />
      <el-table-column align="center" prop="response" label="返回值" show-overflow-tooltip/>
      <el-table-column align="center" prop="ip" label="IP地址" width="150" />
      <el-table-column align="center" prop="createTime" label="创建时间" width="200" />
    </el-table>

    <el-pagination @size-change="(val) => sizeChange(val)" @current-change="(val) => currentChange(val)"
      :current-page="q.page" :page-sizes="[10, 20, 30, 50, 100, 300, 500]" :page-size="q.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="q.totalCount">
    </el-pagination>

    <edit v-if="editVisible" ref="edit" @refreshDataList="reloadData()"/>
  </div>
</template>

<script>
  import Edit from './sysLogEdit'
  export default {
    data () {
      return {
        q: this.getPage(),
        url: '/sysLog/list',
        dataList: [],
        dataLoading: false,
        dataSelect: [],
        editVisible: false
      }
    },
    components: {
      Edit
    },
    activated () {
      this.getTableData(this.url, this.q)
    },
    methods: {
    }
  }
</script>
